<template>
  <div class="box">
    <p class="title">
      商品管理
      <el-button type="primary" class="btn" @click="add">+添加商品</el-button>
    </p>
    <!-- 模糊搜索 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="searchType" placeholder="查询条件">
          <el-option label="按商品id查询" value="ID" aria-selected></el-option>
          <el-option label="按商品名称查询" value="Name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchName" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          style="background:#337AB7;width:50px;height:36px"
          @click="search()"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="shopList" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column label="咨询">
        <template slot-scope="scope">
          <p>{{scope.row.name}}</p>
          <p>{{scope.row.subtitle}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope" column-key>
          <!-- status  2已下架  1在售 -->
          <span>{{scope.row.status | types}}</span>
          <el-button
            size="mini"
            type="warning"
            style="margin-left:20px"
            @click="open2(scope.$index, scope.row)"
          >{{scope.row.status | types2}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="{path:'./shopList',query:{id:scope.row.id}}">查看</router-link>
          <router-link :to="{path:'./bian',query:{id:scope.row.id}}">编辑</router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { goodsList } from "@/request/http";
import { goodsPage } from "@/request/http";
import { shopListSearch } from "@/request/http";
import { shopSearchPagination } from "@/request/http";
import { shopSale } from "@/request/http";
export default {
  data() {
    return {
      shopList: [],
      searchType: "", //查询条件
      searchName: "", //关键字
      that: this,
      currentPage3: 1,
      pageNum: 1,
      total: 0,
      flag: false,
      type: ""
    };
  },
  methods: {
    shop() {
      goodsList().then(res => {
        console.log(res.data.data.list);
        this.shopList = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    handleCurrentChange(val) {
      if (!this.flag) {
        //搜索前的分页
        this.pageNum = val;
        goodsPage(this.pageNum).then(data => {
          console.log(data.data.data.list);
          this.shopList = data.data.data.list;
        }),
          console.log(`当前页: ${val}`);
      } else {
        this.pageNum = val;
        shopSearchPagination({
          listType: "search",
          pageNum: this.pageNum,
          [this.type]: this.searchName
        }).then(data => {
          console.log(data.data.data.list);
          this.shopList = data.data.data.list;
        }),
          console.log(`当前页: ${val}`);
      }
    },
    //模糊搜索
    async search() {
      console.log(this.searchType, this.searchName);
      //首先第一步：判断参数名是 productId 还是 productName
      if (this.searchType == "ID") {
        this.type = "productId";
      } else {
        this.type = "productName";
      }
      //搜索
      if (this.searchName == "") {
        //关键字为空时
        this.flag = false;
        this.shop();
      } else {
        this.flag = true;
        const res = await shopListSearch({
          listType: "search",
          pageNum: 1,
          [this.type]: this.searchName
        });
        this.shopList = res.data.data.list;
        this.total = res.data.data.total;
      }
    },
    open2(index, row) {
      var open = "";
      if (row.status == 1) {
        open = "下架";
      } else {
        open = "上架";
      }
      this.$confirm("确定要" + open + "该商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var status = 0;
          if (row.status == 1) {
            status = 2;
          } else {
            status = 1;
          }
          shopSale({ productId: row.id, status: status }).then(res => {
            alert(res.data.data);
            if (res.data.status == 0) {
              this.shop();
            }
          });
        })
        .catch(() => {});
    },
    add() {
      this.$router.push("/addshop");
    }
  },
  mounted() {
    this.shop();
  },
  filters: {
    types(val) {
      return val == 2 ? "以下架" : "在售";
    },
    types2(val) {
      return val == 2 ? "上架" : "下架";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.box {
  width: 100%;
  height: 100%;
  .title {
    width: 100%;
    height: 8%;
    font-size: 40px;
    .btn {
      width: 10%;
      height: 60%;
      float: right;
    }
  }
  .form-inline {
    width: 100%;
    height: 15%;
    display: flex;
    .form-group {
      display: block;
      margin-right: 30px;
    }
  }
}
</style>